<template>
  <div class="swiper-wrap">
    <swiper
      v-if="data.length"
      :slidesPerView="options?.slidesPerView || 1"
      :spaceBetween="20"
      :slidesPerGroup="options?.slidesPerGroup || 1"
      :loop="true"
      :loopFillGroupWithBlank="true"
      :init="false"
      :initialSlide="0"
      :obverser="true"
      :pagination="{
        clickable: true,
        el: `.swiper-pagination-${comName}`,
      }"
      :navigation="{
        nextEl: `.swiper-button-next-${comName}`,
        prevEl: `.swiper-button-prev-${comName}`,
      }"
      :modules="modules"
      ref="mySwiper"
    >
      <swiper-slide v-for="(prop, index) in props.data" :key="index">
        <slot :data="prop"></slot>
      </swiper-slide>
    </swiper>
    <div
      class="swiper-button-next"
      :class="{
        'hidden-right': showNavigation,
        [comName]: true,
        [`swiper-button-next-${comName}`]: true,
      }"
    ></div>
    <div
      class="swiper-button-prev"
      :class="{
        'hidden-left': showNavigation,
        [comName]: true,
        [`swiper-button-prev-${comName}`]: true,
      }"
    ></div>
    <div
      class="swiper-pagination"
      :class="`swiper-pagination-${comName}`"
    ></div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'MusicCarousel',
}
</script>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
import { Pagination, Navigation } from 'swiper'

import { onMounted, ref, watch } from 'vue'
const modules = [Pagination, Navigation]
const props = defineProps<{
  data: any[] // 轮播图数据
  showNavigation: boolean // 是否显示切换按钮
  comName: string // 父组件名
  options?: { slidesPerView: number; slidesPerGroup: number } // 轮播图的配置，1.一页展示几个  2.翻页时切换几个
}>()
</script>

<style scoped>
.swiper-button-next,
.swiper-button-prev {
  transition: 0.5s ease-in-out;

  top: 50%;
  width: 55px;
  height: 80px;
  background-color: #eee;
  margin-top: -40px;
}
.swiper-button-next {
  right: -55px;
}
.swiper-button-prev {
  left: -55px;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  color: #000;
}
.swiper {
  width: 1200px;
  margin: 0 auto;
  height: 100%;
}
.wrap {
  width: 100%;
  height: 100%;
}
.hidden-left {
  left: 0;
}
.hidden-right {
  right: 0;
}
.swiper-pagination {
  position: absolute;
  bottom: 40px;
}
</style>

<style>
.swiper-pagination .swiper-pagination-bullet {
  margin: 0 10px;
}
.swiper-pagination .swiper-pagination-bullet-active {
  background-color: rgba(0, 0, 0, 0.5);
}

.swiper-wrap {
  /* height: 310px; */
  width: 100%;
  margin: 0 auto;
  padding-bottom: 80px;
}
.home-top {
  overflow: hidden;
}
</style>
